<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>边距重叠的情况</title>
	<style type="text/css">
/*     	.one-container{
            position:relative;
     	}
		.one-container .top{
              
            background:red;
            border:1px solid #ccc;
            margin-bottom: 20px;
		}
        
		.one-container .bottom{
			margin-top:20px;
			background:yellow;
            border:1px solid #ccc;
		}

		.one-container .check{
			width: 100%;
			border: 1px solid #ccc;
			position:absolute;
			background:skyblue;
			top:20px;
		}*/



		.two-container{
            margin-top:20px;
            background:red;
     	}

		.two-container .top{
			margin-top:30px;
			background:yellow;
            border:1px solid #ccc;
		}

		.two-container .check{
			width: 100%;
			border: 1px solid #ccc;
			position:absolute;
			background:skyblue;
			top:0;
			height: 20px;
		}
	</style>
</head>
<body>
  
<!--   <div class="one-container">
  	    <div class="top"> 
            margin-bottom为20px 上内容区
  	    </div>
  	    <div class="bottom"> 
            margin-top为20px 下内容区
  	    </div>
  	    <div class="check">
  	    	  我高20px
  	    </div>
  </div> -->

    <div class="two-container">

  	    <div class="top"> 
            margin-top为20px 上内容区
  	    </div>

  	    <div class="check">
  	    	  我高20px
  	    </div>
  </div>
</body>
</html>